<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">

        <part-child></part-child>

    </div>
</body>

</html>
<script>

    //  解决兄弟组件之间的参数传递
    //  01: 使用ref作用域链, 状态提升的方式 (不建议使用) 
    // 思路: 首先获取父组件实例,然后再获取父组件中的另一个子组件的实例 

    const app = Vue.createApp({
        data() {
            return {

            }
        },
        methods: {

        },
        components: {
            partChild: {
                template: `
                    <div>
                       <p>我是局部组件</p>
                       <part1></part1>
                       <part2 ref='ref2'></part2>
                    </div>
                   `,
                data() {
                    return {
                        msg: "我是局部父组件"
                    }
                },
                components: {
                    part1: {
                        template: `<p @click='emitFn'>我是局部子组件1--{{num}}</p>`,
                        data() {
                            return {
                                num: 10
                            }
                        },
                        methods: {
                            emitFn() {
                                console.log(this.$parent.$refs.ref2.count);
                            }
                        }
                    },
                    part2: {
                        template: `<p>我是局部子组件2--{{count}}</p>`,
                        data() {
                            return {
                                count: 1000
                            }
                        }
                    }
                }
            }
        }
    }).mount('#app')

</script>